<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>20 长图滚动效果</title>
	<style>
		*{
			padding: 0;
			margin: 0;
		}
		body{
			background-color: #000;
		}
		#box{
			width: 658px;
			height: 400px;
			border: 1px solid #ff6700;
			margin: 100px auto;
			overflow: hidden;
			position: relative;
		}
		#box img{
			position: absolute;
			top: 0;
			left: 0;
		}
		#box span{
			position: absolute;
			width: 100%;
			height: 50%;
			left: 0;
			cursor: pointer;
		}
		#box #top{
			top: 0;
		}
		#box #bottom{
			bottom: 0;
		}

	</style>
</head>
<body>
	<div id="box">
		<!-- 658 4066 -->
		<img src="images/timer.jpeg" alt="">
		<span id="top"></span>
		<span id="bottom"></span>
	</div>
	<script type="text/javascript">
		// 1.获取标签
		var box = document.getElementById('box');
		var pic = document.getElementsByTagName('img')[0];
		var divTop = document.getElementById('top');
		var divBottom = document.getElementById('bottom');

		// 2.添加事件
		var num = 0,timer = null;
		divTop.onmouseover  = function  () {
			clearInterval(timer);
			//  让图片向上滚动
			timer = setInterval(function  () {
				 num -= 10;
				if(num >= -3666){
					pic.style.top = num + 'px'; 
				}else{
					clearInterval(timer);
				}
			},50);
		}
		divBottom.onmouseover  = function  () {
			clearInterval(timer);
			//  让图片向上滚动
			timer = setInterval(function  () {
				 num += 10;
				if(num <= 0){
					pic.style.top = num + 'px'; 
				}else{
					clearInterval(timer);
				}
			},100);
		}
		box.onmouseout = function () {
			clearInterval(timer);
		}

	</script>
</body>
</html>